<template>
  <div class="rankingStyle">
    <div class="table">
    <el-page-header @back="goBack" content="排行榜">
    </el-page-header>
      <div style="width: 80%;margin: 0 auto;margin-top: 20px;">
        <el-input
          placeholder="请输入内容"
          v-model="personalId"
          clearable>
          <el-button slot="append" icon="el-icon-search" @click="changefunc"></el-button>
        </el-input>
      </div>
    <div class="infinite-list-wrapper" style="overflow:auto">

      <ul class="list">
        <li v-for="(item,index) in list" :key="index" class="list-item" @click="clickfunc" >
        <div :style="{'font-size':index+1==1?'20px':index+1==2?'20px':index+1==3?'20px':'14px','font-weight':index+1==1?'900':index+1==2?'900':index+1==3?'900':'500'}" class="list_item_first">{{index+1}}</div>
          <div class="list_item_photo">
            <img :src="item.photo">
          </div>
        <div class="list_item_name" :style="{'font-size':index+1==1?'20px':index+1==2?'20px':index+1==3?'20px':'14px','font-weight':index+1==1?'900':index+1==2?'900':index+1==3?'900':'500'}">{{item.name}}</div>

        <div class="list_item_num">总分:&nbsp;&nbsp;&nbsp;&nbsp;{{item.totalNum}}</div>
        </li>
      </ul>

    </div>
<!--      <div style="width: 100%;text-align: right;padding-right: 20px;-->
<!--margin-top: 5px">-->
<!--        <el-pagination-->
<!--          background-->
<!--          layout="prev, pager, next"-->
<!--          @current-change="currentChangefunc"-->
<!--          @prev-click="prevClickfun"-->
<!--          @next-click="nextClickfunc"-->
<!--          :current-page.sync="pages"-->
<!--          :total="1000">-->
<!--        </el-pagination>-->
<!--      </div>-->
    </div>
  </div>
</template>

<script>
  export default {
    name:'ranking',
    created() {
      // this.$ajax({
      //   url: '',
      //   method: '',
      //   data:{}
      // }).then()
    },
    data (){
      return{
        pages:1,

        count: 10,
        loading: false,
        personalId:'',
        list:[
        {name:'张1',photo:require('@/assets/2.jpg'),id: '123',totalNum:  123},
        {name:'张2',photo:require('@/assets/2.jpg'),id: '123',totalNum:  123},
        {name:'张3',photo:require('@/assets/2.jpg'),id: '123',totalNum:  123},
          {name:'张4',photo:require('@/assets/2.jpg'),id: '123',totalNum:  123},
          {name:'张5',photo:require('@/assets/2.jpg'),id: '123',totalNum:  123},
          {name:'张6',photo:require('@/assets/2.jpg'),id: '123',totalNum:  123},
          {name:'张7',photo:require('@/assets/2.jpg'),id: '123',totalNum:  123},
          {name:'张8',photo:require('@/assets/2.jpg'),id: '123',totalNum:  123},
          {name:'张9',photo:require('@/assets/2.jpg'),id: '123',totalNum:  123},
          {name:'张10',photo:require('@/assets/2.jpg'),id: '123',totalNum:  123}
        ]
      }
    },
    computed: {
      noMore () {
        return this.count >= 200
      },
      disabled () {
        return this.loading || this.noMore
      }
    },
    methods:{
      //分页
      currentChangefunc(){
        console.log('currentChangefunc',this.pages)
      },
      prevClickfun(){
        console.log('prevClickfun')
      },
      nextClickfunc(){
        console.log('nextClickfunc')
      },

      goBack(){
        this.$router.go(-1)
      },
      load () {
        console.log(1111)
        this.loading = true
        // setTimeout(() => {
        //   this.count += 2
        //   this.loading = false
        // }, 2000)
      },
      clickfunc(){
        console.log(5555)
      },
      changefunc(){
        console.log(this.personalId)
      }
    }
  }
</script>
<style lang="less" scoped>
.list{
  width: 100%;
  padding: 0;
  /*background-color: red;*/
  .list-item{
    display: flex;
    width: 100%;
    height: 60px;
    align-items: center;

    border-bottom: 1px solid #ccc;
    div{
      line-height: 60px;
    }
  .list_item_first{
     width: 10%;
    text-align: center;
  }
  .list_item_photo{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 2%;
    img{
      width: 100%;
      height: 100%;
    }
  }
    .list_item_name{
    width: 30%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .list_item_num{
     /*width: 10%;*/
    }
}
}
  .rankingStyle{
    width: 100%;
    height: 100%;
    background-color: rgb(240,242,245);
    display: flex;
    align-items: center;

    .table{
       width: 50%;
       height: 85%;
       border-radius: 10px;
       margin: 0 auto;
       background-color: white;
      box-shadow: 5px 5px 4px rgba(199,199,199,.7);
      padding: 15px;
      .infinite-list-wrapper{
        width: 95%;
        margin: 0 auto;
        height: 80%;
        /*background-color: red;*/
      }
     }
    /*.table:hover{*/
    /*  box-shadow: 0 0 0;*/
    /*}*/
  }
/*@keyframes shodwnbox {*/
/*  from {*/
/*    box-shadow: 5px 5px 4px #aaaaaa;*/
/*  }*/
/*  to{*/
/*    box-shadow: 0 0 0;*/
/*  }*/
/*}*/
</style>
